<template>
  <view class="iot-pyg-index">
    <!-- 搜索框开始 -->
    <SearchInput></SearchInput>
    <view class="iot-index-swiper">
      <swiper autoplay indicator-dots circular>
        <swiper-item v-for="item in swiperList" :key="item.goods_id">
          <navigator :url="item.navigator_url" open-type="navigate">
            <image :src="item.image_src" mode="aspectFit|aspectFill|widthFix" :lazy-load="false" @error="" @load=""
              style="   
              width: 750rpx;  
                height: 502rpx;
                display: inline-block;
                box-sizing: border-box;
              "></image>
          </navigator>
        </swiper-item>
      </swiper>
    </view>
    <!-- 搜索框结束 -->
    <!-- 导航开始 -->
    <view class="iot-index-cate">
      <navigator url="/pages/category/index" open-type="switchTab" v-for="item in cateList" :key="item.name">
        <image :src="item.image_src" mode="widthFix"></image>
      </navigator>
    </view>
    <!-- 导航结束 -->
    <!-- 楼层开始 -->
    <view class="iot-index-floor">
      <view class="iot-floor-group" v-for="item1 in floorList" :key="item1.floor_title">
        <!-- title -->

        <view class="iot-floor-title">
          <image mode="widthFix" :src="item1.floor_title.image_src"></image>
        </view>

        <!-- 内容 -->

        <view class="iot-floor-list">
          <navigator url="item2.navigator_url" v-for="item2 in item1.product_list" :key="item2.name">
            <image :src="item2.image_src" mode="widthFix"></image>
          </navigator>
        </view>
      </view>
    </view>
    <!-- 楼层结束 -->
  </view>
</template>

<script>
import SearchInput from '../../components/SearchInput/SearchInput'
export default {
  data() {
    return {
      /**
       * 页面的初始数据
       */
      //轮播图数组
      swiperList: [],
      //导航数组
      cateList: [],
      //楼层数据
      floorList: []

    }
  },
  /**
  轮播图
   */
  onLoad: function () {
    uni.request({
      url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata',
      success: (res) => {
        this.swiperList = res.data.message
        console.log(this.swiperList, "swiper")
      }
    });
    uni.request({
      url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/catitems',
      success: (res) => {
        this.cateList = res.data.message
        console.log(this.cateList, "catelist")
      }
    });
    uni.request({
      url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/floordata',
      success: (res) => {
        this.floorList = res.data.message
        console.log(this.floorList, "this")
      }
    });

  },


}
</script>
<style>
@import './index.css';
</style>
